<template>
    <div>
        <top-bar
                :show="show"
                :rightButton="rightButton" :title="title" :userLeft="userLeft" @wxcMinibarLeftButtonClicked="leftBack">
        </top-bar>
        <div ref="read-content-web"></div>
        <scroller :style="{height: listHeight + 'px'}" :class="[ 'read-content-content', skinColor, nightMode? 'night':'']"
              v-if="readContent">
            <div ref="read-content" class="content-list" @click="contentClick">
                <text :class="[nightMode?'nightFontColor': '']"
                      :style="{ fontSize: fontSize + 'px' }">&nbsp;&nbsp;&nbsp;&nbsp;{{ readContent.title }}
                </text>
            </div>
            <div class="content-list" @click="contentClick">
                <text :class="[nightMode?'nightFontColor': '']" v-for="temp in readContent.chapter.body.split('\n')"
                      :style="{ fontSize: fontSize + 'px'}">&nbsp;&nbsp;&nbsp;&nbsp;{{ temp }}
                </text>
            </div>
            <div :class="['content-footer',skinColor]">
                <div class="preChapter al-center border-radius" @click="preChapter">
                    <text>上一章</text>
                </div>
                <div class="nextChapter al-center border-radius" @click="nextChapter">
                    <text>下一章</text>
                </div>
            </div>
        </scroller>
        <div :class="['read-content-set', { 'read-opt': isShowSet }]" v-if="isShowSet">
            <div class="read-set-bg-list bg-border row">
                <div v-for="skin in skinBgList" class="read-set-bg-item" @click="changeBkColor(skin)" :key="skin">
                    <div :class="['skin', skin, skin === skinColor?'active':'']">
                    </div>
                </div>
            </div>
            <div class="read-set-switch bg-border row">
                <div class="read-set-switch-item row" @click="changeFontSize(false)">
                    <text :class="[ 'changeFont']">
                        -
                    </text>
                </div>
                <div class="read-set-switch-item row" @click="changeFontSize(true)">
                    <text :class="[ 'changeFont']">
                        +
                    </text>
                </div>
            </div>
        </div>
        <div :class="['read-content-set', { 'read-opt': isShowProgress }]" v-if="!isShowSet && isShowProgress">
            <div class="bg-border row">
                <div class="process-item center" @click="preChapter">
                    <text class="process-text">上一章</text>
                </div>
                <div class="process-item center">
                    <text class="process-text">{{readContent.title}}</text>
                </div>
                <div class="process-item center" @click="nextChapter">
                    <text class="process-text">下一章</text>
                </div>
            </div>
        </div>
        <div :class="['read-content-footer', { 'read-opt': isShowOpt }]" v-if="isShowOpt">
            <div class="footer-tab row">
                <div class="footer-tab-item" @click="showMenu">
                    <div class="footer-tab-icon">
                    </div>
                    <text class="footer-tab-label">目录</text>
                </div>
                <div class="footer-tab-item" @click="showProgress">
                    <div class="footer-tab-icon">
                    </div>
                    <text class="footer-tab-label">进度</text>
                </div>
                <div class="footer-tab-item" @click="switchMode">
                    <div v-if="nightMode">
                        <div class="footer-tab-icon">
                        </div>
                        <text class="footer-tab-label">日间模式</text>
                    </div>
                    <div v-else>
                        <div class="footer-tab-icon">
                        </div>
                        <text class="footer-tab-label">夜间模式</text>
                    </div>
                </div>
                <div class="footer-tab-item" @click="showOptSet">
                    <div class="footer-tab-icon">
                    </div>
                    <text class="footer-tab-label">设置</text>
                </div>
            </div>
        </div>
        <popup class="popup" popup-color="rgb(92, 184, 92)"
               :show="isMenuShow"
               @wxcPopupOverlayClicked="popupOverlayBottomClick"
               pos="left"
               width="500">
            <catalog :chapters="chapters" :currentChapter="currentChapterIndex" :sort="sort" @goRead="goRead" @onSort="onSort"></catalog>
        </popup>

        <wxc-dialog title="添书"
                    :show="dialogShow"
                    :single="false"
                    :content="content"
                    cancelText="不了"
                    confirm-text="加入书架"
                    mainBtnColor="#ed424b"
                    @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                    @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked"
                    @wxcDialogNoPromptClicked="wxcDialogNoPromptClicked">
        </wxc-dialog>
    </div>
</template>
<script>
    const storage = weex.requireModule('storage');
    const dom = weex.requireModule('dom');
    const modal = weex.requireModule('modal');
    const {platform} = weex.config.env;
    const isWeb = platform === 'Web';
    import {
        SET_BOOK,
        SET_NIGHT_MODE,
        SET_SKIN_COLOR,
        SET_FONT_SIZE,
    } from '../../store/mutations';
    import TopBar from "../../components/bar/TopBar"
    import Catalog from "../../components/book/Catalog"
    import Popup from "../../components/book/Popup"
    import {WxcProgress, Utils, WxcPopup, WxcDialog} from "weex-ui"
    import {getRealScreenHeight} from "../../util/Config";

    export default {
        name: 'readContent',
        components: {
            TopBar, Popup, Catalog, WxcProgress, WxcPopup, WxcDialog
        },
        props: {
            readContent: Object,
            bookId: String,
            title: String,
            curBook: {
                readChapter: 0,
                sort: false,
                isInShelf: false,
            },
            chapters: {
                type: Array,
                default: () => []
            },
            currentChapterIndex: {
                type: Number,
                default: 0,
            }
        },
        watch: {
            //当为点击目录进入阅读界面时，滚动条回到顶部
            readContent: function () {
                if (this.readContent) {
                    let el;
                    el = this.$refs['read-content'];
                    el && dom.scrollToElement(el, {offset: 0});
                }
            }
        },
        data() {
            return {
                isShowOpt: false,
                isShowSet: false,
                skinBgList: ['skin-default', 'skin-blue', 'skin-green', 'skin-pink', 'skin-dark', 'skin-light'],
                nightMode: false,
                skinColor: 'skin-default',
                fontSize: 30,
                rightButton: "",
                show: true,
                isMenuShow: false,
                sort: false,
                isWeb: isWeb,
                isShowProgress: false,
                barHeight: 90,
                SHELF_BOOK: [],
                screenHeight: getRealScreenHeight(Utils),
                dialogShow: false,
                userLeft: true,
                isTrue: true,
                content: '是否将本书加入书架',
            }
        }
        ,
        mounted() {
            storage.getItem('NIGHTMODE', event => {
                let value = event.data;
                if (value !== "undefined") {
                    if (value === 'true') {
                        this.nightMode = true;
                    } else {
                        this.nightMode = false;
                    }
                }
            });
            storage.getItem('SKINCOLOR', event => {
                let value = event.data;
                if (value !== "undefined") {
                    this.skinColor = value;
                }
            });
            storage.getItem('FONTSIZE', event => {
                let value = event.data;
                if (value !== "undefined") {
                    this.fontSize = parseInt(value);
                }
            });
            if (!this.skinBgList.includes(this.skinColor)) {
                SET_SKIN_COLOR('skin-default');
            }
        },
        computed: {
            listHeight() {
                if (this.show) {
                    return this.screenHeight - 90;
                } else {
                    return this.screenHeight;
                }
            }
        },
        methods: {
            showMenu: function () {
                this.show = this.isShowProgress = this.isShowOpt = this.isShowSet = false;
                this.isMenuShow = true;
            },
            progressClose: function () {
                this.isShowProgress = false;
            },
            showProgress: function () {
                this.isShowSet = false;
                this.isShowProgress = !this.isShowProgress;
            },
            switchMode: function () {
                this.nightMode = !this.nightMode;
                SET_NIGHT_MODE(this.nightMode);
            },
            showOpt() {
                if (this.isShowOpt || this.isShowSet) {
                    this.isShowOpt = this.isShowSet = false;
                } else {
                    this.isShowOpt = true;
                }
            },
            showOptSet() {
                this.isShowProgress = false;
                this.isShowSet = !this.isShowSet;
            },
            changeFontSize(isAdd) {
                if (this.fontSize < 50 && isAdd) {
                    this.fontSize++;
                } else if (this.fontSize > 20 && !isAdd) {
                    this.fontSize--;
                } else {
                    return;
                }
                SET_FONT_SIZE(this.fontSize);
            },
            changeBkColor(skin) {
                this.skinColor = skin;
                this.nightMode = false;
                SET_NIGHT_MODE(false);
                SET_SKIN_COLOR(this.skinColor);
            },
            updateBook() {
                this.$emit('updateBook', this.curBook);
            },
            contentScroll() {
                this.show = false;
                this.isShowOpt = false;
                this.isShowSet = false;
                this.isShowProgress = false;
            },
            contentClick() {
                if (this.show) {
                    this.contentScroll();
                } else {
                    this.show = true;
                    this.isShowOpt = true;
                }
            },
            // 目录功能
            goRead(obj) {
                this.popupOverlayBottomClick();
                this.$emit("goRead", obj);
            },
            onSort() {
                this.sort = !this.sort;
                this.$emit('onSort', {});
            },
            //非状态组件，需要在这里关闭
            popupOverlayBottomClick() {
                this.isMenuShow = false;
            },
            nextChapter() {
                this.$emit('nextChapter', {});
            },
            preChapter() {
                this.$emit('preChapter', {});
            },
            leftBack() {
                if (this.curBook.isInShelf) {
                    this.$router.go(-1);
                } else {
                    this.dialogShow = true;
                }
            },
            openBottomPopup() {
                this.dialogShow = true;
            },
            dialogBack() {
                this.dialogShow = false;
                this.$router.go(-1);
            },
            wxcDialogCancelBtnClicked() {
                //此处必须设置，组件为无状态组件，自己管理
                console.log('back');
                this.dialogBack();
                console.log('back', this.curBook);
            },
            wxcDialogConfirmBtnClicked() {
                //此处必须设置，组件为无状态组件，自己管理
                console.log('ok');
                this.curBook.isInShelf = true;
                this.updateBook();
                this.dialogBack();
            },
            wxcDialogNoPromptClicked(e) {
                //此处必须设置，组件为无状态组件，自己管理

            }
        }
    }
</script>


<style scoped>
    .read-content {
        position: relative;
        color: rgba(0, 0, 0, .85);
        min-height: 100%;
    }

    .read-content-content {
        position: relative;
        padding: 0 25px;
    }

    .row {
        flex-direction: row;
    }

    .content-list {
        margin: 10px 0;
        letter-spacing: 0;
        line-height: 1.8;
    }

    .content-footer {
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 60px;
    }

    .al-center {
        flex: 1;
        align-items: center;
    }

    .border-radius {
        margin-left: 20px;
        margin-right: 20px;
        height: 80px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .nextChapter,
    .preChapter {
        background-color: #ed424b;
    }

    .read-content-set {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 80px;
        color: #ffffff;
        background-color: rgba(0, 0, 0, .9);
    }

    .read-set-bg-list {
        display: flex;
        padding: 10px 0;
    }

    .bg-border {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(23, 23, 23);
    }

    .read-set-bg-item {
        flex: 1;
        align-items: center;
    }

    .skin {
        width: 60px;
        height: 60px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        border-width: 2px;
        border-style: solid;
        border-color: rgba(0, 0, 0, .9);
    }

    .active {
        border-color: #ed424b;
    }

    .read-set-switch {
        padding: 10px 0;
        display: flex;
    }

    .read-set-switch-item {
        flex: 1;
    }

    .nochange {
        opacity: .6;
    }

    .changeFont {
        color: #0088fb;
        font-size: 40px;
    }

    .read-content-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        color: #ffffff;
        background-color: rgba(0, 0, 0, .9);
        z-index: 9999;
    }

    .footer-tab {
        position: relative;
        display: flex;
        height: 80px;
    }

    .footer-tab-item {
        flex: 1;
        text-align: center;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

    .footer-tab-label {
        margin-top: 4px;
        color: #afddff;
    }

    .read-opt {
        opacity: 1;
        display: block;
    }

    .skin-default {
        background-color: #c4b395;
    }

    .skin-blue {
        background-color: #c3d4e6;
    }

    .skin-green {
        background-color: #c8e8c8;
    }

    .skin-pink {
        background-color: #F8C9C9;
    }

    .skin-dark {
        background-color: #3E4349;
    }

    .skin-light {
        background-color: #f6f7f9;
    }

    .night {
        color: rgba(255, 255, 255, .5);
        background-color: #1a1a1a;
    }

    .nightFontColor {
        color: #5b5b5b;
    }

    .popup {
        /*overflow: auto;*/
    }

    .process-text {
        color: #afddff;
        text-align: center;
        lines: 2;
    }

    .center {
        align-content: center;
        justify-content: center;
    }

    .process-item {
        flex: 1;
        padding: 10px;
    }
</style>